<template>
  <view>
    <!-- 页面标题区域 -->
    <view class="smart-page-head">
      <view class="smart-page-head-title">navigator, 链接</view>
    </view>

    <!-- 1. 跳转到新页面（补全根路径，确保层级正确） -->
    <navigator 
      url="/pages/tabBar/tabcompage/newpage/newpage" 
      hover-class="navigator-hover"
    >
      <button type="default">跳转到新页面</button>
    </navigator>

    <!-- 2. 在当前页打开（补全完整路径，避免找不到页面） -->
    <navigator 
      url="/pages/tabBar/tabcompage/newpage/newpage?title=redirect" 
      open-type="redirect" 
      hover-class="other-navigator-hover"
    >
      <button type="default">在当前页打开</button>
    </navigator>

    <!-- 3. 跳转tab页面（路径与tabBar配置保持一致，无需修改） -->
    <navigator 
      url="/pages/tabBar/api/api" 
      open-type="switchTab" 
      hover-class="other-navigator-hover"
    >
      <button type="default">跳转tab页面</button>
    </navigator>

    <!-- 4. 跳转到登录页面（路径格式正确，无需修改） -->
    <navigator 
      url="/pages/Login/Login" 
      hover-class="other-navigator-hover"
    >
      <button type="default">跳转到登录页面</button>
    </navigator>

    <!-- 5. 新增：触发JS跳转的按钮（原代码缺少触发入口） -->
    <button 
      type="default" 
      @click="gonavigate" 
      style="margin-top: 20rpx;"
    >
   
    </button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: 'navigator',
      Account: 'cyy',   // 要传递的账号参数
      CID: 44322        // 要传递的ID参数
    }
  },
  methods: {
    // 修复：补充函数体大括号，修正路径层级（补全tabBar目录）
    gonavigate() {
      uni.navigateTo({
        // 用模板字符串简化参数拼接，路径与组件跳转保持一致
        url: `/pages/tabBar/tabcompage/newpage/newpage?Account=${this.Account}&cid=${this.CID}`
      })
    }
  }
}
</script>

<!-- 可选：添加样式隔离，避免污染其他页面 -->
<style scoped>
.smart-page-head {
  padding: 20rpx 30rpx;
  border-bottom: 1px solid #f5f5f5;
}
.smart-page-head-title {
  font-size: 34rpx;
  font-weight: 600;
  color: #333;
}
/* 给每个跳转按钮添加间距，布局更美观 */
navigator, button {
  margin: 15rpx 30rpx;
  display: block;
}
</style>